
import { useEffect, useRef } from 'react'
import './SubMonitor.css'

import {gRegisterDevice, KASEO_MAIN, SESSION_ID} from '../../../KaseoApp'
import KaseoCanvas2dGraphicsDI from '../../runtime/dev/KaseoCanvasGraphicsDI'

export default function () {

    useEffect(() => {
        if (ref.current == null) {
            console.warn('Kaseo: cannot fetch ref of screen canvas')
            return
        }

        const ctx = ref.current.getContext('2d', {alpha: false})

        if (ctx == null) {
            console.warn('Kaseo: cannot get 2d context of screen canvas')
            return
        }

        const gdi = new KaseoCanvas2dGraphicsDI(ctx, 260, 100, 'Dev::SubScreen')

        gRegisterDevice(gdi)
        KASEO_MAIN.registerExtraMonitorDI(gdi)
    }, [SESSION_ID])

    const ref = useRef<HTMLCanvasElement>(null)

    function onMouseDown(e: React.MouseEvent<HTMLCanvasElement>) {
        let ne = e.nativeEvent

        if (!ref.current)
            return

        /*

        let {px, py} = transformCanvasPointerXY(ref.current, ne.offsetX, ne.offsetY, 260, 100)

        let c2d = ref.current?.getContext('2d')
        if (c2d) {
            c2d.moveTo(px, py)
            c2d.arc(px, py, 3, 0, 360)
            c2d.moveTo(0, 0)
            c2d.lineTo(px, py)
            c2d.lineTo(260, 100)
            c2d.stroke()
            console.log(px, py)
        }
        */
    }

    return (
        <div className="kaseo-sub-screen">
            <canvas className='kaseo-sub-screen-canvas' width={260} height={100}
                ref={ref} onMouseDown={onMouseDown}></canvas>
        </div>
    )
}
